<template>
	<view >
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">首页</block>
		</cu-custom>
		<view class="context">
			<button type="primary" class="uploadButton" @click="getIDCard()">上传图片</button>
			<view class="image-item" v-for="(item,index) in photoArr" :key="index">
				<image style="width: 200px; height: 200px; background-color: #eeeeee;" :src="item.showPath"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import url from '@/common/config.js'
	export default {
		components: {
			// uLink
		},
		data() {
			return {
				id:0,
				camera:null,
				photoArr: [],
				dataList: [],
				photoArrCapacity: 6,
				image:'',
				navigateFlag: false,
				lists: [
				],
				 webviewStyles: {
				                    progress: {
				                        color: '#FF3333'
				                    }
				                }
			};
		},
		onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
		methods: {
			uploadImg(files) {
				uni.showLoading({
					mask: true,
					title: '正在上传'
				});
				const header = {
					'Content-Type': 'multipart/form-data;charset=UTF-8'
				}
				return new Promise((resolve, reject) => {
					 uni.uploadFile({
						url: url.httpUrl+'/upload', //仅为示例，非真实的接口地址
						filePath:files,
						name:'file',
					    success: (uploadFileRes) => {
						uni.hideLoading();
						resolve(JSON.parse(uploadFileRes.data));
						},fail: (err) => {
							reject(err);
						}
					});
			
			});
			
			},
		
			getIDCard(){
				let me = this
				if (this.photoArr.length > this.photoArrCapacity) {
					this.tips('超出限制咯~');
					return 0;
				}
				uni.chooseImage({
					count:  me.photoArrCapacity -  me.photoArr.length,
					success: (chooseImageRes) => {
						chooseImageRes.tempFilePaths.forEach(item => {
							// 正式环境下调用此方法上传图片
							me.uploadImg(item).then(result => {
								me.photoArr.push(result.data);
							});
							// that.photoArr.push(item);
							console.log("返回的数组:",JSON.parse(me.photoArr))
							
						});
					}
				});
				
			}
			
		},
		
	}
</script>

<style>
	.context{
			padding-top: 20px;
	},
	.uploadButton{
		width: 200px;
	}
</style>
